<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { adminFetchPictureUsingPost } from '@/api/fileController.ts'
import { message } from 'ant-design-vue'

const router = useRouter()

const pictureForm = reactive<API.PictureUploadByBatchRequest>({
  count: 5,
  batch:1
})

const loading = ref(false)

async function addBatch() {
  loading.value = true
  const resp = await adminFetchPictureUsingPost(pictureForm)
  if (resp.data.code === 0 && resp.data.data) {
    message.success(`批量创建图片成功，共${resp.data.data}条`)
    router.push('/')
  } else {
    message.error('批量创建图片失败:' + resp.data.message)
  }
  loading.value = false
}
</script>

<template>
  <div id="addPicture">
    <h2 class="title">批量创建图片</h2>

    <!--    以下是图片上传的表单-->
    <a-form :model="pictureForm" name="uploadBatchForm" autocomplete="off" layout="vertical">
      <a-form-item name="searchText" label="关键词">
        <a-input v-model:value="pictureForm.searchText" placeholder="请输入关键词" />
      </a-form-item>

      <a-form-item name="count" label="数量">
<!--        * 因第三方api限制，为了避免重复抓取图片，一批次最多抓取5张图片，敬请谅解-->
<!--        <br>-->
        <a-input-number
          style="min-width: 160px"
          :min="1"
          :max="5"
          v-model:value="pictureForm.count"
          placeholder="请输入/选择数量"
        />
      </a-form-item>

      <a-form-item name="batch" label="批次">
        <a-input-number
          style="min-width: 160px"
          :min="1"
          :max="6"
          v-model:value="pictureForm.batch"
          placeholder="请输入/选择执行批次"
        />
      </a-form-item>

      <a-form-item>
        <a-button
          type="primary"
          html-type="submit"
          style="width: 100%"
          :loading="loading"
          @click="addBatch()"
          >批量创建</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>

<style scoped>
#addPicture {
  max-width: 720px;
  margin: 0 auto;
}
</style>
